<script setup>

function btn1Click() {
    console.log("点击了 按钮1");

}

function btn2Click(param) {
    console.log("param: ", param);
    console.log("点击了 按钮2");
}

function btn3Click(param1, param2) {
    console.log("param1: ", param1);
    console.log("param2: ", param2);
    console.log("点击了 按钮3");
}

</script>

<template>
    <!-- 事件处理函数无参，可以将() 省略 -->
    <button @click="btn1Click()">按钮1</button>
    <button @click="btn1Click">按钮1</button>

    <hr>
    <!-- 函数定义有一个参数，事件处理只写函数名，默认将事件进行传入 -->
    <button @click="btn2Click">按钮2</button>
    <!-- 函数定义有一个参数，事件处理函数名中没有参数，该参数的值为 undefined -->
    <button @click="btn2Click()">按钮2</button>
    <!-- 正常调用 -->
    <button @click="btn2Click(123)">按钮2</button>

    <hr>
    <!-- 函数定义有多个参数，事件处理只写函数名，默认将事件作为第一个参数传入 -->
    <button @click="btn3Click">按钮3</button>
    <!-- 函数定义有多个参数，事件处理函数名中没有参数，该参数的值为 undefined -->
    <button @click="btn3Click()">按钮3</button>
    <!-- 函数定义有多个参数，事件处理函数名中传入部分参数，缺少的参数的值为 undefined -->
    <button @click="btn3Click(123)">按钮3</button>
    <button @click="btn3Click(123, 'abc')">按钮3</button>
</template>

<style lang="css" scoped></style>